<template>
  <div class="box-card">
   <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>数据统计范围 {{goneForm.startTime}}至{{goneForm.invalidTime}} 共<span style="color:#4B7EFE">{{goneForm.countDays}}天</span></span>
      </div>
      <div class="info">
        <div>活动概览</div>
        <div class="card">
          <card title="领券总人数" unit="人" :num="goneForm.sendNum" back='linear-gradient(225deg, #81A5FF 0%, #4B7EFE 100%)' :img="`${$ossUrl}market/effect-head.png`"/>
          <card title="领券订单总金额" unit="元" :num="goneForm.totalOrderAmount" back='linear-gradient(225deg, #B7C5DC 0%, #8394B3 100%)' :img="`${$ossUrl}market/effect-file.png`"/>
          <card title="客单价" unit="元" :num="goneForm.averageCost" back='linear-gradient(225deg, #ECD39E 0%, #D6A75B 100%)' :img="`${$ossUrl}market/effect-money.png`"/>
          <card title="实际营销成本" unit="元" :num="goneForm.couponCost" back='linear-gradient(225deg, #B3B2DA 0%, #7578B4 100%)' :img="`${$ossUrl}market/effect-folder.png`"/>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>召唤人数概况</span>
      </div>
      <div class="pic">
        <div class="pic-left">
          <div class="left-word">
            <!-- <div><span>召唤成功数</span><span>{{goneForm.joinUserNum}}</span></div> -->
            <div><span>领券总人数</span><span>{{goneForm.sendNum}}</span></div>
          </div>
          <div class="left-pic">
            <CirclePic :id="'driverChart'" :data="dataCall" :style="{height: '150px'}"/>
          </div>
          <div class="left-title">
            <div><span style="background: #26EA9C;"></span><span>召唤成功数：</span><span>{{goneForm.joinUserNum}}</span></div>
            <!-- <div><span style="background: #3074FF;"></span><span>总召唤数：</span><span>{{goneForm.sendNum}}</span></div> -->
          </div>
        </div>
        <div class="pic-left">
          <div class="left-word">
            <div><span>产生订单金额(元)</span><span>￥{{goneForm.totalOrderAmount}}</span></div>
          </div>
          <div class="left-pic">
            <CirclePic :id="'customChart'" :data="dataOrder" :style="{height: '150px'}"/>
          </div>
          <div class="left-title">
            <div><span style="background: #FF4D4F;"></span><span>新司机订单金额：</span><span>￥{{goneForm.newUserAmount}}</span></div>
            <div><span style="background: #FFA940;"></span><span>老司机订单金额：</span><span>￥{{goneForm.oldUserAmount}}</span></div>
          </div>
        </div>
      </div>
    </el-card>
     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>智能分析</span>
      </div>
      <my-line chartId="myLine1" titleText="活动交易人数" :seriesData="gongPeopleRnder" :xData="xData"></my-line>
      <my-line chartId="myLine2" titleText="活动交易金额" :seriesData="gongAmountRnder" :xData="xData"></my-line>
    </el-card>
  </div>  
</template>
<script>
import card from './components/driverCard'
import CirclePic from './echart/circle'
import MyLine from './echart/line'
import { activeDataTrend, activityDetail } from '@/api/marketShop'
export default {  
  data () {
    return {
      img:'https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/tou.png',
      dataCall: [],
      dataOrder: [],
      goneForm: {},
      gongPeopleRnder: [], // 每日活动人数渲染数据
      gongAmountRnder: [], // 每人活动金额渲染数据
      xData: [] // 横坐标
    }
  },
  components: {
    card,
    CirclePic,
    MyLine
  },
  methods: {
    // echarts数据
    async activeDataTrendApi (activeId) {
      try {
        const { result } = await activeDataTrend({ activeId })
        const xArray = [] // 横坐标
        const goneOldPeople = [] // 每日活动人数老司机
        const goneNewPeople = [] // 每日活动人数新司机
        const goneOldMoney = [] // 每人活动金额老司机
        const goneNewMoney = [] // 每人活动金额老司机
        result.forEach(item => {
          xArray.push(item.date)
          goneOldPeople.push(item.oldUserNum)
          goneNewPeople.push(item.newUserNum)
          goneOldMoney.push(item.oldUserAmount)
          goneNewMoney.push(item.newUserAmount)
        })
        this.xData = xArray
        this.gongPeopleRnder = [
          {
            name: '老司机活动人数',
            data: goneOldPeople,
            borderColor: '#FF6F02',
            colorStops:['rgba(2595, 192, 0, 0.9)','rgba(255, 111, 2, 0.1)']
          },
          {
            name: '新司机活动人数',
            data: goneNewPeople,
            borderColor: '#AFFF2C',
            colorStops:['rgba(175, 255, 44, 0.9)','rgba(175, 255, 44, 0.1)']
          }
        ]
        this.gongAmountRnder = [
          {
            name: '老司机活动金额',
            data: goneOldMoney,
            borderColor: '#FF2A27',
            colorStops:['rgba(255, 143, 143, 0.8)','rgba(255, 42, 39, 0.1)']
          },
          {
            name: '新司机活动金额',
            data: goneNewMoney,
            borderColor: '#3074FF',
            colorStops:['rgba(48, 116, 255, 0.8)','rgba(48, 116, 255, 0.1)']
          }
        ]
      } catch (e) {
        console.log(e)
      }
    },
    // 活动效果字段接口
    async activityDetailApi (activeId) {
      try {
        const res = await activityDetail({ activeId })
        const { startTime, invalidTime, countDays, sendNum, totalOrderAmount, averageCost, couponCost, joinUserNum, newUserAmount, oldUserAmount } = res.result
        this.goneForm = { startTime, invalidTime, countDays, sendNum, totalOrderAmount, averageCost, couponCost, joinUserNum, newUserAmount, oldUserAmount }
        const failNum = sendNum - joinUserNum
        this.dataCall = [{ value: joinUserNum, name: '召唤成功数', itemStyle: { color: '#26EA9C' } }, { value: failNum, name: '未召唤成功数', itemStyle: { color: '#3074FF' } }]
        this.dataOrder = [{ value: newUserAmount, name: '新司机订单金额', itemStyle: { color: '#FF4D4F' } }, { value: oldUserAmount, name: '老司机订单金额', itemStyle: { color: '#FFA940' } }]
      } catch (e) {
        console.log(e)
      }
    }
  },
  created () {
    const activeId = this.$route.query.activeId
    this.activeDataTrendApi(activeId)
    this.activityDetailApi(activeId)
  }
}
</script>
<style lang="less" scoped>
@import url('./styles/common.less');
</style>